<template>
  <a-form
    ref="atlasFormRef"
    class="page-video"
    :labelCol="{ style: { width: '100px' } }"
    :colon="false"
    labelAlign="right"
    :model="imageState"
    :rules="configRules"
  >
    <div class="page-video-threeColumn">
      <div class="page-video-threeColumn-item mr-[170px]">
        <a-form-item label="同步封面图" name="sync_cover" class="form-item">
          <a-radio-group v-model:value="imageState.sync_cover" class="w-[220px]">
            <a-radio :value="0">关闭</a-radio>
            <a-radio :value="1" class="ml-[64px]">开启</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
      <div class="ml-0 page-video-threeColumn-item">
        <a-form-item label="入库时间" name="put_in_time" class="form-item">
          <a-radio-group v-model:value="imageState.put_in_time" class="w-[220px]">
            <a-radio :value="0">本机</a-radio>
            <a-radio :value="1" class="ml-[64px]">来源</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
    </div>
    <div class="page-video-threeColumn">
      <div class="page-video-threeColumn-item mr-[170px]">
        <a-form-item label="随机人气" name="random_popularity" class="form-item">
          <a-radio-group v-model:value="imageState.random_popularity" class="w-[220px]">
            <a-radio :value="0">关闭</a-radio>
            <a-radio :value="1" class="ml-[64px]">开启</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
      <div class="ml-0 page-video-threeColumn-item">
        <a-form-item label="随机播放量" name="random_play" class="form-item">
          <a-input-number
            v-model:value="imageState.random_play[0]"
            :defaultValue="0"
            class="w-[74px]"
            :min="0"
            :max="99999"
            :step="1"
            :precision="0"
            @blur="
              () => {
                if (!imageState.random_play[0]) {
                  imageState.random_play[0] = 0
                }
              }
            "
          />
        </a-form-item>
        <a-form-item class="page-video-threeColumn-item-line">
          <minus-outlined />
        </a-form-item>
        <a-form-item name="random_play" class="form-item">
          <a-input-number
            v-model:value="imageState.random_play[1]"
            :defaultValue="0"
            class="w-[74px]"
            :min="0"
            :max="99999"
            :step="1"
            :precision="0"
            @blur="
              () => {
                if (!imageState.random_play[1]) {
                  imageState.random_play[1] = 0
                }
              }
            "
          />
        </a-form-item>
      </div>
    </div>
    <div class="page-video-common">
      <a-form-item label="入库重复规则" name="put_rule" class="form-item">
        <a-checkbox-group v-model:value="imageState.put_rule" :options="atlasRepeatRuleData" />
      </a-form-item>
    </div>
    <div class="page-video-common">
      <a-form-item label="二次更新规则" name="update_rule" class="form-item">
        <a-checkbox-group v-model:value="imageState.update_rule" :options="atlasSecondRepeatRuleData" />
      </a-form-item>
    </div>
    <div class="page-video-common">
      <a-form-item label="标题替换" class="form-item">
        <a-textarea
          v-model:value="imageState.title_filter"
          placeholder="格式：采集标题:替换后名字，每行一条"
          show-count
          :maxlength="1000"
          class="h-[114px]"
        />
      </a-form-item>
    </div>
    <div class="page-video-common bottom-item">
      <a-form-item label="标题过滤" class="form-item">
        <a-textarea
          v-model:value="imageState.title_replace"
          placeholder="多个关键词使用逗号“,”分隔，过滤的数据将不会新增和更新"
          show-count
          :maxlength="1000"
          class="h-[114px]"
        />
      </a-form-item>
    </div>
  </a-form>
  <div class="page-btn">
    <a-button type="primary" :loading="loading" @click="saveImagePage">保存当前页面</a-button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { imageState, configRules, atlasRepeatRuleData, atlasSecondRepeatRuleData } from '../state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const {
  system: { get_image, set_image }
} = apis
const atlasFormRef = ref()
const loading = ref(false)
const getImage = () => {
  get_image().then((res: any) => {
    console.log(res, '获取采集图集配置')
    Object.assign(imageState, res)
  })
}
const saveImagePage = () => {
  atlasFormRef.value
    .validate()
    .then(() => {
      console.log(imageState, 'imageState')
      if (imageState.random_play[1] < imageState.random_play[0]) {
        return message.warning('“最小值”不能大于“最大值”')
      }
      loading.value = true
      set_image(imageState).then((res: any) => {
        message.success('图集设置保存成功')
        loading.value = false
      })
    })
    .catch(() => {
      loading.value = false
    })
}
defineExpose({ getImage })
</script>

<style lang="less" scoped>
.page-video {
  :deep(.ant-checkbox-group-item) {
    width: 95px;
    margin: 5px 18px 24px 2px;
  }
  .bottom-item {
    margin: 24px 0 32px;
  }
  &-common {
    width: 80%;
    .form-item {
      margin: 5px 0;
    }
  }
  &-threeColumn {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    &-item {
      display: flex;
      align-items: center;
      .form-item {
        position: relative;
      }
      &-line {
        color: #d8d8d8;
        margin: 0 12px 24px;
      }
    }
  }
}
.page-btn {
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}
</style>
